<template>
    <div class="drill">
        <div class="header">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">钻孔状态监控 </el-menu-item>
                <el-menu-item index="2" @click="index()">钻机实时状态图</el-menu-item>
                <el-menu-item index="3" @click="bb()">看板</el-menu-item>
            </el-menu>
            <div class="search">
                <el-input v-model="searchStat" placeholder="请输入设备状态" size="small" @keyup.enter.native="search"
                    @input="getData"></el-input>
                <el-button type="primary" size="small" plain @click="search()">查询</el-button>
            </div>
        </div>
        <top></top>
        <div class="drill-content">
            <div class="top">
                <div class="table font">设备编号</div>
                <div class="table font">最后上线时间</div>
                <div class="table font">生产型号</div>
                <div class="table font">当前进度</div>
                <div class="table font">报警时长(分)</div>
                <div class="table font">累计报警时长(分)</div>
                <div class="table font">设备状态</div>
            </div>
            <div class="top" :style="{ color: getItemColor(item.STAT) }" v-for="(item, index) in data" :key="index">
                <div class="table">{{ item.DEV_CODE }}</div>
                <div class="table"> {{ item.LAST_TIME }}</div>
                <div class="table">{{ item.DEV_ID }}</div>
                <div class="tables">{{ item.NOW_URATE }}%</div>
                <div class="tables">{{ item.BAOJINGTIME }}</div>
                <div class="tables">{{ item.BAOJINGTOTALTIME }}</div>
                <div class="tables">{{ item.STAT }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import Top from '@/components/top.vue';
import axios from 'axios';
export default {
    components: {
        "Top": Top,
    },
    data() {
        return {
            data: [],
            activeIndex: '1',
            activeIndex2: '1',
            searchStat: '',
            boxstyle: {
                '停机': '#F56C6C',
                '运行': '#67C23A',
                '待机': '#E6A23C',
                '默认': '#000000',
            },
        }
    },
    computed: {
        filteredData() {
            //限制查询条件
            // return this.data.filter(item => item.STAT.includes(this.searchStat));
            return this.data.filter(item => {
                return (
                    (item.DEV_CODE.includes(this.searchStat) || this.searchStat === '') ||
                    (item.DEV_ID.includes(this.searchStat) || this.searchStat === '') ||
                    (item.STAT.includes(this.searchStat) || this.searchStat === '')
                );
            });
        },

    },
    created() {
        this.getData(); // 在组件创建时加载数据
    },
    methods: {
        search() {
            console.log(this.filteredData);
            this.data = this.filteredData;
        },
        getData() {
            axios.get('http://192.168.12.66:80/drillingOperation/getDrillingFaultList',
                {
                    
                }
            )
                .then(response => {
                    this.data = response.data;
                })
                .catch(error => {
                    this.error = error;
                });
        },
        getItemColor(stat) {
            return this.boxstyle[stat] || this.boxstyle['默认']; // 如果状态不在map中，可以用默认值
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        index() {
            this.$router.push({ path: '/home' })
        },
        bb() {
            this.$router.push({ path: '/VisualReport' })
        },
    },
}
</script>

<style lang="less" scoped>
.drill {
    top: 0;
    left: 0;
    background-color: #f5f5f5;

    .header {
        display: flex;

        .el-menu {
            flex: 4;
            font-weight: bold;
            background-color: #6bda5c;
        }

        .search {
            flex: 1;
            display: flex;
            padding: 10px;
            background-color: #6bda5c;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #e6e6e6;

            .el-input {
                margin-right: 10px;
            }
        }
    }

    .drill-content {
        margin: 10px;
        background-color: #fff;

        .top {
            width: 100%;
            height: 100%;
            display: flex;

            .table {
                width: 100%;
                height: 23px;
                color: #000000;
                display: grid;
                place-items: center;
                border: 1px solid #969696;
            }

            .tables {
                width: 100%;
                height: 23px;
                display: grid;
                place-items: center;
                border: 1px solid #969696;
            }

            .font {
                font-weight: bold;
            }
        }
    }
}
</style>